<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--head 中引用的 css-->
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">首页</title>
    <!--semantic ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/css/semantic.min.css}">
    <!--文章的排版-->
    <link rel="stylesheet" th:href="@{/css/typo.css}">
    <!--引入自定义的样式-->
    <link rel="stylesheet" th:href="@{/css/jie.css}">
    <!--详情页的动态效果-->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!--剪切板复制代码-->
    <script th:src="@{/lib/prism/clipboard.min.js}"></script>
    <!--代码高亮-->
    <link rel="stylesheet" th:href="@{/lib/prism/prism.css}">
    <!--自动生成目录-->
    <link rel="stylesheet" th:href="@{/lib/tocbot/tocbot.css}">
    <!--引入 md 插件-->
    <link rel="stylesheet" th:href="@{/lib/editormd/css/editormd.min.css}">
</head>

<body>

<!--导航栏 header -->
<nav class="ui attached segment m-padded-tb-mini m-shadow-small" th:fragment="menu"
     style="background: #f9fafb !important;">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <a th:href="@{/index.html}" class="item">
                <img class="ui circular image" th:src="@{/images/touxiang.jpg}" style="width: 60px"/>
                &nbsp;&nbsp; <span th:text="#{message.topbar.nickname}"></span>
            </a>&nbsp;
            <a th:href="@{/index.html}" class="item m-mobile-hidden m-item"
               th:classappend="${activeUrl == 'index.html'} ? 'active'">
                <i class="small home icon"></i> <span th:text="#{message.topbar.index}"></span>
            </a>

            <a th:href="@{/category.html}" class="item m-mobile-hidden m-item"
               th:classappend="${activeUrl == 'types.html'} ? 'active'">
                <i class="small bookmark icon"></i> <span th:text="#{message.topbar.category}"></span>
            </a>

            <a th:href="@{/tags.html}" class="item m-mobile-hidden m-item"
               th:classappend="${activeUrl == 'tags.html'}  ? 'active'">
                <i class="small tags icon"></i> <span th:text="#{message.topbar.tags}"></span>
            </a>

            <a th:href="@{/archives.html}" class="item m-mobile-hidden m-item"
               th:classappend="${activeUrl == 'archives.html'} ? 'active'">
                <i class="small archive icon"></i> <span th:text="#{message.topbar.archives}"></span>
            </a>

            <a th:href="@{/about.html}" class="item m-mobile-hidden m-item"
               th:classappend="${activeUrl == 'about.html'}  ? 'active'">
                <i class="small info icon"></i> <span th:text="#{message.topbar.about}"></span>
            </a>

            <!--搜索框-->
            <div class="right item m-mobile-hidden m-item">
                <div class="ui transparent icon m-popup input">
                    <input id="item" type="text" class="search-input" name="item" placeholder="Search...."
                           data-content="搜索一下" onkeypress="getKey()" th:value="${queryStr != null} ? ${queryStr}">
                    <a th:href="@{/search/}" id="search-btn" class="search-button">
                        <i class="search link icon"></i>搜索</a>
                </div>
            </div>

            <form action="" id="toSearch" method="get"></form>

            <!--手机端显示的汉堡按钮-->
            <a href="#" class="ui icon button m-right-top m-mobile-show menu toggle">
                <i class="sidebar icon"></i>
            </a>
        </div>
</nav>


<!--底部 footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive" th:fragment="footer">

    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <!--第一部分-->
            <div class="four wide column">
                <div class="ui link list">
                    <div class="item">
                        <img th:src="@{/images/wechat.jpg}" class="ui rounded image"
                             style="width: 120px;"/>
                    </div>
                </div>
            </div>
            <!--第二部分-->
            <div class="five wide column">
                <h4 class="ui inverted header m-text" th:text="#{message.latestblog.title}"></h4>
                <div id="newBlog-container">
                    <div class="ui inverted link list" th:fragment="footerBlogList" th:each="blog : ${footerBlogList}">
                        <a th:href="@{/article/} + ${blog.id}" target="_blank" class="item" th:text="${blog.title}">hello</a>
                    </div>
                </div>
            </div>
            <!--  &lt;!&ndash;第三部分&ndash;&gt;
              <div class="three wide column">
                  <h4 class="ui inverted header m-text">最新博客</h4>
                  <div class="ui inverted link list">
                      <a href="#" class="item">hello</a>
                      <a href="#" class="item">hello</a>
                      <a href="#" class="item">hello</a>
                  </div>
              </div>-->
            <!--第四部分-->
            <div class="seven wide column">
                <h4 class="ui inverted header m-text" th:text="#{message.motto.title}"></h4>
                <p class="ui inverted basic m-text-thin m-text-spaced m-text-lined m-opacity-mini">
                    <span th:text="#{message.motto.content}"></span>
                </p>

            </div>
        </div>
        <!--水平分割线-->
        <div class="ui inverted section divider"></div>
        <!--版权-->
        <p class="m-text-thin m-text-spaced m-text-lined m-opacity-tiny">
            <span th:text="#{message.copyright}"></span>
            <a href="http://www.beian.miit.gov.cn/" target="_blank" style="color: white;"
               th:text="#{message.beian}"></a>
        </p>

    </div>

</footer>


<!--底部的 js-->
<th:block th:fragment="script">
    <!--jQuery-->
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <!--semantic.js-->
    <script th:src="@{/js/semantic.min.js}"></script>
    <!--平滑滚动-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <!--滚动侦测-->
    <script th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <!--代码高亮-->
    <script th:src="@{/lib/prism/prism.js}"></script>
    <!--自动生成目录-->
    <script th:src="@{/lib/tocbot/tocbot.js}"></script>
    <!--文章二维码-->
    <script th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script>

        $(function () {
            // 鼠标点击搜索按钮
            $("[id='search-btn']").click(
                function () {
                    /* let item = $('#item').val();
                     let href = $(this).attr("href") + item;
                     let form = $("#toSearch");
                     form.attr("action", href);
                     form.submit();*/
                    getKey();
                    return false;
                });
            // 异步发送页脚请求
            $('#newBlog-container').load('/footerBlog');
        });

        // 键盘按压，跳转
        function getKey() {
            let item = $('#item').val();
            let href = $('#search-btn').attr("href") + item;
            let form = $("#toSearch");
            form.attr("action", href);
            form.submit();
        }

    </script>
</th:block>


</body>

</html>